<template>
  <div class="container">
    <div class="flex-space">
      <div class="nav-title flex-row">
        <div class="nav-icon" @click="toggleCollapsed">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="icon"/>
        </div>
        <div class="nav-title-text">东岚助手管理系统</div>
      </div>
      <div>
        <a-dropdown placement="bottomCenter">
          <a class="nav-title-user" @click="e => e.preventDefault()">
            <a-icon type="poweroff" />
            <div class="username">{{username}}</div>
          </a>
          <a-menu slot="overlay">
            <a-menu-item key="0">
              <a @click="logout">退出登录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>

    <a-row class="row">
      <!--  导航栏  -->
      <a-col :span="navSpan">
        <a-menu
          :default-selected-keys="defaultNav"
          :default-open-keys="['sub1','sub2','sub3']"
          mode="inline"
          :inline-collapsed="collapsed"
          class="nav"
        >
          <a-menu-item key="1" class="home" @click="navPage('/index')">
            <a-icon type="home" />
            <span>首页</span>
          </a-menu-item>
          <template v-if="isAdmin == '2' || isAdmin == 2 || isAdmin == '3' || isAdmin == 3">
            <a-sub-menu key="sub1">
              <span slot="title"><a-icon type="database"/><span>基本数据</span></span>
              <a-menu-item key="2" @click="navPage('/devInfo')">
                设备信息
              </a-menu-item>
              <a-menu-item key="3" @click="navPage('/equitmentPartInfo')">
                设备零件信息
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"><a-icon type="setting" /><span>查询管理</span></span>
              <a-menu-item key="4" @click="navPage('/maintainData')">
                维护数据
              </a-menu-item>
              <a-menu-item key="5" @click="navPage('/repairData')">
                维修数据
              </a-menu-item>
              <a-menu-item key="6" @click="navPage('/changeData')">
                更换数据
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title"><a-icon type="user" /><span>账户信息</span></span>
              <a-menu-item key="7" @click="navPage('/personalInfo')">
                个人信息
              </a-menu-item>
              <template v-if="isAdmin == '3' || isAdmin == 3">
                <a-menu-item key="8" @click="navPage('/userManagement')">
                  用户管理
                </a-menu-item>
              </template>
            </a-sub-menu>
          </template>
        </a-menu>
      </a-col>
      <!--  主体内容  -->
      <a-col :span="mainSpan" :offset="offset">
        <div class="main-content">
          <router-view></router-view>
        </div>
      </a-col>
    </a-row>
    <div class="footer">
      <a href="https://beian.miit.gov.cn/" target="_blank" class="beian">粤ICP备XXXXXXXXX号-1</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Navigation.vue",
    data() {
      return {
        collapsed: true,
        mainSpan: '22',
        navSpan: '2',
        offset: '0',
        defaultNav: [],
        username: 'Elaine',
        isAdmin: '',
      };
    },
    created() {
      this.initNav()
    },
    methods: {
      //初始化导航栏跳转显示
      initNav(){
        this.username = window.localStorage.getItem('username');
        this.isAdmin = window.localStorage.getItem('username');
        if (this.$route.path == '/index'){
          this.defaultNav[0] = '1'
        }
        else if(this.$route.path == '/devInfo'){
          this.defaultNav[1] = '2'
        }
        else if(this.$route.path == '/index'){
          this.defaultNav[1] = '3'
        }
      },
      //左侧导航栏收缩
      toggleCollapsed() {
        this.collapsed = !this.collapsed;
        if(this.collapsed == true){
          this.navSpan = '2'
          this.mainSpan = '22'
          this.offset = '0'
        }else{
          this.navSpan = '4'
          this.mainSpan = '19'
          this.offset = '1'
        }
      },
      // 页面跳转
      navPage(path){
        this.$router.push(path)
      },
      //注销登录
      logout(){
        console.log("注销登录，清除缓存")
        // window.localStorage.setItem('username', '')
        // window.localStorage.setItem('password', '')
        window.localStorage.removeItem('username')
        window.localStorage.removeItem('password')
        window.localStorage.removeItem('token')
        // window.localStorage.setItem('token', '')
        document.cookie = `accessToken=; expires=${new Date(0).toGMTString()}`
        this.$router.replace({path: '/',replace:true})
      }
    },
  }
</script>

<style scoped>
  .container{
    background-color: #F6F6F6;
    /*height: 100vh;*/
  }
  .row{
    padding: 20px 20px 10px 6px;
  }
  .flex-row{
    display: flex;
    flex-direction: row;
  }
  .icon{
    color: #1890FF;
    font-size: 20px;
    cursor: pointer;
  }
  .nav-title-text{
    color: #1890FF;
    font-size: 17px;
    margin-left: 30px;
  }
  .nav-title{
    justify-content: left;
    align-items: center;
  }
  .main-content{
    width: 100%;
    height: 550px;
    background-color: #F6F6F6;
  }
  .nav{
    text-align: left;
  }
  .flex-space{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
  }
  .nav-title-user{
    color: #666666;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    cursor: pointer;
  }
  .username{
    padding-left: 15px;
    padding-right: 16px;
  }
  .footer{
    background-color: #fff;
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .beian{
    text-decoration: none;
    cursor: pointer;
    color: #666;
    width: 100%;
    height: 5%;
  }
  .beian:hover{
    color: #333;
  }
</style>